
$(document).ready(function(){
	const pcc = document.getElementById("#pcc").value().split("-");

	const p = document.getElementById("#province");
	const c = document.getElementById("#city");
	const x = document.getElementById("#country");
	let aArr, bArr, cArr;

	fetch("common/area").then(r => r.json()).then(data=>{console.log(data);aArr=data})

	aArr.forEach(e => p.options.add(new Option(e.text, e.id, pcc[0]===e.id, pcc[0]===e.id)));
	
	p.onchange = function () {
		Array.from(c.options).slice(1).forEach(option => option.remove());
		Array.from(x.options).slice(1).forEach(option => option.remove());
	    bArr = aArr.find(e => e.id === this.value).children;
	    bArr.forEach(e => c.options.add(new Option(e.text, e.id, pcc[1]===e.id, pcc[1]===e.id)));
	}
	
	c.onchange = function () {
		Array.from(x.options).slice(1).forEach(option => option.remove());
	    cArr = bArr.find(e => e.id === this.value).children;
	    cArr.forEach(e => x.options.add(new Option(e.text, e.id, pcc[2]===e.id, pcc[2]===e.id)));
	}
	if(pcc[0]) p.dispatchEvent(new Event('change'));
	if(pcc[1]) c.dispatchEvent(new Event('change'));
})